<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header-main">
        <div class="header-main-left">
          <img
            src="./../../assets/red-bg.png"
            alt=""
            class="header-main-left-img"
          />
          <span class="header-main-left-sapn">无人值守KDC系统</span>
        </div>
        <div class="header-main-right">
           <el-icon :size="30"><avatar /></el-icon>
          <!-- <img src="./../../assets/login.png" alt="" class="header-main-right-img"> -->
          <span class="header-main-right-span">{{ user_name }}</span>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <Menu />
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
       <el-footer>copyright@成都卓源网络科技有限公司</el-footer>
    </el-container>
  </div>
</template>

<script>
import Menu from "../../components/menu.vue";
import { computed } from "vue";
import { Avatar } from "@element-plus/icons-vue";
export default {
  components: {
    Menu,
    Avatar,
  },
  setup() {
    const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    const user_name = computed({
      get() {
        return userInfo.user_name;
      },
    });

    return {
      user_name,
    };
  },
};
</script>

<style scoped lang='scss'>
 .el-icon {
    vertical-align: middle;
  }
  .el-footer{
    border-top:1px solid #c1c1c1;
    height:10vh;
    display:flex;
    justify-content: center;
    align-items: center;
  }
.common-layout .el-header {
  background: linear-gradient(to top, #1c67a0, #2571a3);
  color: var(--el-text-color-primary);
  //   text-align: center;
  height:10vh;
  color: #edeff0;
  width: 100%;
}
.common-layout .el-aside {
  background-color: #fff;
  color: var(--el-text-color-primary);
  text-align: center;
  height: 80vh;
  // height: calc(100vh - 10vh);
  width: 200px;
}
.common-layout .el-main {
  background-color: #f8f8f8;
  color: var(--el-text-color-primary);
  // text-align: center;
  // height: calc(100vh - 80px);
  height: 80vh;
  width: calc(100vw - 200px);
}

/* 标题样式 */
.header-main {
  display: flex;
  justify-content: space-between;
  .header-main-left {
    height: 80px;
    line-height: 80px;
    .header-main-left-img {
      width: 60px;
      vertical-align: middle;
    }
    .header-main-left-sapn {
      vertical-align: middle;
      font-size: 24px;
      margin-left: 5px;
    }
  }
  .header-main-right {
    height: 100%;
    width: 200px;
    // border: 1px solid yellow;
    line-height: 80px;
    margin-right: 5px;
    .header-main-right-img {
      width: 30px;
      vertical-align: middle;
    }
    .header-main-right-span {
      vertical-align: middle;
      font-size: 14px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>